<template>
	<view class="edit-block">
		<view class="del-block" @click="delOneBlock">
			x
		</view>
		<!-- 文本编辑 -->
		<template v-if="txtEditor.type === 'txt' ">
			<textarea class="edit-region" placeholder="请输入正文" v-model="content" @blur="setEditContent">
				
			</textarea>
		</template>
		<!-- 图片编辑 -->
		<template v-else>
			<view class="edit-img-wrapper">
				<view class="edit-img" @click="changeImg">
					<image :src="editor.src" mode="aspectFill" class="img"></image>
				</view>
				<view class="img-desc">
					<input type="text" v-model="imgDes" placeholder="请输入文字描述" @blur="setImgDes"/>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				content:'',
				editor:'',
				imgDes:''
			};
		},
		props:{
			txtEditor:Object
		},
		created() {
			this.editor = this.txtEditor;
			// 把图片存入store
			if(this.txtEditor.type === 'img'){
				this.addEditContent(this.txtEditor)
			}
		},
		methods:{
			...mapMutations(['addEditContent']),
			setEditContent(){
				let _this = this
				this.addEditContent({
					id:_this.txtEditor.id,
					content:_this.content.trim(),
					type:_this.txtEditor.type
				})
			},
			delOneBlock(){
				console.log('删除');
				let _this = this
				this.$emit('delOneBlock',{
					id:_this.txtEditor.id
				})
			},
			changeImg(){
				let _this = this
				new Promise((resolve,reject) => {
					// 选择图片
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {
						  
						  // 获取当前图片路径
						  const path = res.tempFilePaths[0]
						  // 获取图片信息
						  uni.getImageInfo({
						  	src:path,
							success(info) {
								const option = {
									filePath:path,
									cloudPath: Date.now() + '.' + info.type.toLowerCase()
								}
								resolve(option)
							},
							fail(err) {
								reject(new Error(err.errMsg || '未能获取图片类型'))
							}
						  })
					    },
						fail: () => {
							reject(new Error('取消选择！'))
						}
					})
				})
				.then((options) => {
					uni.showLoading({
						title: '文件上传中...'
					})
					// 上传文件返回结果
					return uniCloud.uploadFile({
						...options,
						// 上传过程的回调
						onUploadProgress(e) {
							console.log(e);
						}
					})
				})
				.then(res => {
					// 修改当前图片路径
					_this.$set(_this.editor,'src',res.fileID);
					
					_this.addEditContent(_this.editor)
					
					uni.hideLoading()
					uni.showModal({
						content:'图片上传成功',
						showCancel:false
					})
				}).catch(err => {
					uni.hideLoading()
					if (err.message !== '取消选择！') {
						uni.showModal({
							content: `图片上传失败`,
							showCancel: false
						})
					}
				})
			},
			setImgDes(){
				this.editor.des = this.imgDes;
				this.addEditContent(this.editor);
			}
			
		}
	}
</script>

<style>
	.edit-block {
		position: relative;
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		padding: 50rpx;
		margin-top: 50rpx;
	}
	.del-block {
		color: #aaa;
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.edit-region{
		margin-top: 20rpx;
		width: calc(100% - 50rpx);
		height: 100%;
	}
	.edit-img-wrapper {
		display: flex;
	}
	.edit-img {
		width:200rpx ;
		height: 200rpx;
		margin: 0 20rpx;
	}
	.img {
		width: 100%;
		height: 100%;
	}
</style>
